<template>
  <div class="dateWrapper">
    <div class="date">{{ moment.time }}</div>
    <Popover :visible="visible" trigger="click" placement="left" class="popoverWrapper">
      <template #content>
        <div class="toolWrapper">
          <div><HeartOutlined /><span class="text">赞</span></div>
          <div class="line"></div>
          <div><MessageOutlined /><span class="text">评论</span></div>
        </div>
      </template>
      <div class="tool" @click="visible = !visible">
        <div></div>
        <div></div>
      </div>
    </Popover>
  </div>
</template>
<script lang="ts" setup>
import { MessageOutlined, HeartOutlined } from '@ant-design/icons-vue'
import { Popover } from 'ant-design-vue'
import { ref, inject, defineProps, onMounted, onUnmounted } from 'vue'
import PubSub from 'pubsub-js'
const moment = inject('moment', {})
const visible = ref<Boolean>(false)
onMounted(() => {
  // 检测滚轮事件
  PubSub.subscribe('momentScroll', (msg: string, data: any) => {
    visible.value = false
  })
})
onUnmounted(()=> {
  PubSub.unsubscribe('momentScroll')
})
</script>
<style lang="less" scoped>
.dateWrapper {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .date {
    font-size: 12px;
    color: #757575;
  }
  .tool {
    background-color: #efefef;
    width: 32px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 15px;
    &:hover {
      background-color: #e2e2e2;
    }
    div {
      width: 3px;
      height: 3px;
      background-color: #404250;
      border-radius: 50%;
    }
  }
}
</style>
<style lang="less">
.ant-popover-inner {
  padding-top: 7px;
  padding-bottom: 7px;
}
.ant-popover-arrow,
.ant-popover-inner {
  .toolWrapper {
    display: flex;
    gap: 20px;
    flex-direction: row;
    div {
      display: flex;
      gap: 10px;
      align-items: center;
      span {
        font-size: 16px;
      }
      .text {
        font-size: 14px;
      }
      &.line {
        height: 60%;
        width: 1px;
        background-color: rgb(182, 182, 182);
      }
    }
  }
}
</style>
